<template>
	<cl-crud ref="CrudRef">
		<el-tabs v-model="tabActive" type="card" class="demo-tabs">
			<el-tab-pane
				:label="item.name"
				:name="item.id"
				:key="item.id"
				v-for="item in tabList"
			></el-tab-pane>
		</el-tabs>
		<cl-row>
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 关键字搜索 -->
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table" />
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />
	</cl-crud>
</template>


<script lang="ts" name="user-list" setup>
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
import { reactive, ref, onMounted, watch } from "vue";

const { service } = useCool();
const CrudRef = ref();
const tabActive = ref(null);
const tabList: any = ref([]);
// cl-table
const Table = useTable({
	columns: [
		{
			label: "门派名称",
			prop: "name",
			minWidth: 150
		},

		{
			label: "创建时间",
			prop: "createTime",
			sortable: "desc",
			minWidth: 160
		},
		{
			label: "操作",
			type: "op",
			buttons: ["edit", "delete"]
		}
	]
});

// cl-upsert
const Upsert = useUpsert({
	dialog: {
		width: "600px"
	},
	items: [
		{
			prop: "name",
			label: "门派名称",
			component: { name: "el-input" },
			required: true
		}
	],
	async onSubmit(data, { next }) {
		next({
			...data,
			raceId: tabActive.value
		});
	}
});
// cl-crud
const Crud = useCrud(
	{
		service: service.user.sect,
		async onRefresh(params, { next }) {
			// 1 默认调用
			next({
				...params,
				raceId: tabActive.value
			});
		}
	},
	(app) => {
		// app.refresh();
	}
);
onMounted(() => {
	service.user.race.list().then((res) => {
		tabList.value = res || [];
		if (res.length) {
			tabActive.value = res[0].id;
			// getSectList();
		}
	});
});
watch(tabActive, () => {
	console.log(tabActive.value, Crud, 22222222);
	CrudRef.value.refresh();
});
</script>
